<template>
  <q-page class="q-pa-md">
    <div class="row items-center">
      <div class="q-pb-md text-h5">
        {{ pageTitle }}
        <span class="text-subtitle1">列表</span>
      </div>
      <q-space></q-space>
      <search-bar-toggle-btn v-model="searchBarVisibility"></search-bar-toggle-btn>
    </div>
    <div class="q-pa-sm shadow-2 q-mb-md items-center" v-show="searchBarVisibility">
      <div class="row q-col-gutter-sm">
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">日志明细ID</div>
          <div class="col-8">
            <easy-input v-model="fpsReq.logLineId" :readonly="listDataLoadingState" />
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">转移单号</div>
          <div class="col-8">
            <easy-input v-model="fpsReq.lpnMoveNum" :readonly="listDataLoadingState" />
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">仓库编码</div>
          <div class="col-8">
            <easy-input v-model="fpsReq.warehouseCode" :readonly="listDataLoadingState" />
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">托盘编码</div>
          <div class="col-8">
            <easy-input v-model="fpsReq.underContainerCode" :readonly="listDataLoadingState" />
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">转移的托盘数量</div>
          <div class="col-8">
            <easy-input v-model="fpsReq.containerNum" :readonly="listDataLoadingState" />
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">任务状态</div>
          <div class="col-8">
            <easy-input v-model="fpsReq.taskState" :readonly="listDataLoadingState" />
          </div>
        </div>
        <div class="col-shrink row q-col-gutter-sm">
          <div class="col">
            <q-toggle v-model="fpsReq.online" :disable="listDataLoadingState" @update:model-value="loadListData(2)"
              dense toggle-indeterminate class="q-ma-xs" label="是否线上自动操作"/>
          </div>
        </div>
      </div>
      <div class="row q-pt-sm">
        <div class="q-mr-sm">
          <q-btn :disable="listDataLoadingState" @click="loadListData(2)" color="primary" icon="search" label="查询" />
        </div>
      </div>
    </div>
    <div class="shadow-2">
      <q-table @request="fpsAssist.onDataTableRequest" :rows="$d.tableData" :columns="fpsInfo.columnsInfo"
        separator="cell" row-key="id" v-model:pagination="fpsInfo.paginationInfo" :visible-columns="fpsInfo.visibleColumns"
        dense flat :hide-pagination="true" :loading="listDataLoadingState" color="primary" binary-state-sort
        hide-selected-banner>
        <template v-slot:top="props">
          <!--填充所有剩余空间-->
          <q-space />
          <table-col-options-cfg v-model:table-columns="fpsInfo.columnsInfo"
            v-model:visible-columns="fpsInfo.visibleColumns"
            @update-col-options-for-save="fpsAssist.saveColOptions">
          </table-col-options-cfg>
          <q-btn flat dense :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
            :title="props.inFullscreen ? '退出全屏' : '全屏显示'" @click="props.toggleFullscreen" class="q-ml-sm"
            :ripple="false" />
        </template>
        <template v-slot:body-cell-online="props">
          <q-td :props="props" auto-width>
            <q-badge :color="props.row.online?'positive':'grey-6'"
              :label="props.row.online ? '是' : '否'" />
          </q-td>
        </template>
        <template v-slot:no-data>
          <div class="full-width items-center justify-center row">
            <q-icon name="error_outline" />
            无数据
            <q-btn flat icon="refresh" :loading="listDataLoadingState"
              :disable="listDataLoadingState" dense title="刷新" size="sm" class="q-ml-sm" @click="loadListData"></q-btn>
          </div>
        </template>
        <template v-slot:bottom>
          <paging-bar :pageNo="fpsReq.pageNo" :pageSize="fpsReq.pageSize" :totalAmount="fpsInfo.totalAmount"
            @pagesize-changed="fpsAssist.onPageSizeChanged" @go-to-page="fpsNav.gotoPage"
            :loading-state="listDataLoadingState" />
        </template>
        <template v-slot:body-cell-rawData="props">
          <q-td :props="props">
            <a @click="showJson('WCS返回报文', props.row.rawData, props.row.taskId)" href="javascript:void(0)">{{ (props.row.rawData && props.row.rawData.length>30)?`${props.row.rawData.slice(0, 29)}...`:props.row.rawData }}</a>
          </q-td>
        </template>
        <template v-slot:body-cell-containers="props">
          <q-td :props="props">
            <a @click="showContent('所有托盘', props.row.containers, props.row.taskId)" href="javascript:void(0)">{{ (props.row.containers && props.row.containers.length>30)?`${props.row.containers.slice(0, 29)}...`:props.row.containers }}</a>
          </q-td>
        </template>
        <!--状态列插槽-->
        <template v-slot:body-cell-taskState="props">
          <q-td :props="props" auto-width>
            <q-badge :color="fx.fmt.lpnTaskStateColor(props.row.taskState)"
              :label="fx.fmt.lpnTaskState(props.row.taskState)" />
          </q-td>
        </template>
      </q-table>
    </div>
    <!-- 弹出消息对话框 -->
    <q-dialog transition-hide="none" transition-show="none" v-model="openingMsgDlg">
      <q-card style="width: 800px; max-width: 80vw;">
        <q-card-section class="row items-center q-px-sm q-pt-sm q-pb-none">
          <div class="text-h6">{{$d.openingMsgItem.title}}</div>
          <q-space />
          <q-btn icon="close" flat dense v-close-popup />
        </q-card-section>
        <q-card-section class="row items-center q-px-sm q-pb-sm q-pt-none">

          <div class="text-subtitle2">ID:{{($d.openingMsgItem.taskId)}}</div>
        </q-card-section>
        <q-separator />
        <q-card-section class="q-pa-sm">
          <q-scroll-area style="height: 500px" :visible="true">
            <json-viewer :value="$d.openingMsgItem.content" :copyable="true" />
          </q-scroll-area>
        </q-card-section>
      </q-card>
    </q-dialog>
  </q-page>
</template>

<script lang="ts">
export default {
  name: 'InvIncrementList'
}
</script>

<script lang="ts" setup>
import {useTitleHelper} from '@njt/foundation/hooks/titleHelper'
import {ColumnInfo} from '@njt/foundation/defs/comm'
import {reactive, ref} from 'vue'
import {useFpsHelper} from '@njt/foundation/hooks/fpsHelper'
import {
  GetMhlSfEmptyLpnMoveTaskListReq,
  GetMhlSfEmptyLpnMoveTaskListResp,
  MhlSfEmptyLpnMoveTask
} from 'src/defs/sf/lpnView'
import JsonViewer from 'vue-json-viewer'
import 'vue-json-viewer/style.css'

const pageTitle = '空托盘转移任务'
useTitleHelper(pageTitle)
let listDataLoadingState = ref(false)
const openingMsgDlg = ref(false)

const columnsDefine: ColumnInfo[] = [
  {
    label: '任务ID',
    name: 'taskId',
    field: 'taskId',
    align: 'left',
    defVisible: true,
    sortable: true,
    defOrder: 1,
  },
  {
    label: '日志明细ID',
    name: 'logLineId',
    field: 'logLineId',
    align: 'left',
    defVisible: true,
    defOrder: 2,
  },
  {
    label: '转移单号',
    name: 'lpnMoveNum',
    field: 'lpnMoveNum',
    align: 'left',
    defVisible: true,
    defOrder: 3,
  },
  {
    label: '是否线上自动操作',
    name: 'online',
    field: 'online',
    align: 'left',
    defVisible: true,
    defOrder: 4,
  },
  {
    label: '任务状态',
    name: 'taskState',
    field: 'taskState',
    align: 'left',
    defVisible: true,
    defOrder: 5
  },
  {
    label: 'WCS返回报文',
    name: 'rawData',
    field: 'rawData',
    align: 'left',
    defVisible: true,
    defOrder: 6,
  },
  {
    label: 'RequestId',
    name: 'requestId',
    field: 'requestId',
    align: 'left',
    defVisible: true,
    defOrder: 7,
  },
  {
    label: '仓库编码',
    name: 'warehouseCode',
    field: 'warehouseCode',
    align: 'left',
    defVisible: true,
    defOrder: 8,
  },
  {
    label: '托盘编码',
    name: 'underContainerCode',
    field: 'underContainerCode',
    align: 'left',
    defVisible: true,
    defOrder: 9,
  },
  {
    label: '所有有托盘码',
    name: 'containers',
    field: 'containers',
    align: 'left',
    defVisible: true,
    defOrder: 10,
  },
  {
    label: '转移的托盘数量',
    name: 'containerNum',
    field: 'containerNum',
    align: 'left',
    defVisible: true,
    defOrder: 11,
  },
  {
    label: '创建人',
    name: 'createP',
    field: 'createP',
    align: 'left',
    defVisible: true,
    defOrder: 12,
    format: (val: string,row: any) => $f.fmt.userDisp(val, row.createPn)
  },
  {
    label: '创建时间',
    name: 'createDt',
    field: 'createDt',
    align: 'left',
    defVisible: true,
    defOrder: 13,
    format: (val: string) => $f.fmt.dtFmtFullNoSec(val)
  },
]

const $d = reactive({
  tableData: [] as MhlSfEmptyLpnMoveTask[],
  openingMsgItem: {
    title: '',
    content: '',
    taskId: ''
  },
})

let fpsReq: GetMhlSfEmptyLpnMoveTaskListReq = reactive({
  logLineId: null,
  lpnMoveNum: null,
  online: null,
  taskState: null,
  warehouseCode: null,
  underContainerCode: null,
  containerNum: null,
  pageNo: 1,
  pageSize: 40,
  orderBy: null,
  isDescending: false
})

const loadListData = function (resetFpsReq?: number) {
  if (resetFpsReq) {
    if (resetFpsReq >= 1) {
      fpsReq.pageNo = 1
    }
    if (resetFpsReq >= 2) {
      fpsReq.orderBy = ''
      fpsReq.isDescending = false
    }
  }
  listDataLoadingState.value = true
  $f.axios
    .get<GetMhlSfEmptyLpnMoveTaskListResp>('/project/mhlbc/lpn/lpn/get-mhl-sf-empty-lpn-move-task-list', {params: fpsReq})
    .then((resp) => {
      fpsAssist.handleGenericFpsResp(resp.data)
      $d.tableData = resp.data.mhlSfEmptyLpnMoveTasks
      fpsAssist.saveFpsReq(fpsReq)
    })
    .catch((err) => {
      $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
    })
    .finally(() => {
      listDataLoadingState.value = false
    })
}

const showJson = (title: string, content: string, taskId: string) => {
  $d.openingMsgItem.title = title
  $d.openingMsgItem.content = JSON.parse(content)
  $d.openingMsgItem.taskId = taskId
  openingMsgDlg.value = true
}

const showContent = (title: string, content: string, taskId: string) => {
  $d.openingMsgItem.title = title
  $d.openingMsgItem.content = content
  $d.openingMsgItem.taskId = taskId
  openingMsgDlg.value = true
}

const {
  fpsInfo,
  fpsNav,
  fpsAssist,
  searchBarVisibility
} = useFpsHelper('/wms/lpn/lpn-view',
  '/wms/lpn/lpn-view',
  null,
  null,
  fpsReq,columnsDefine,
  null,
  loadListData
)

let fx = $f
</script>
